<!-- 专注力测评用户编辑弹窗 -->
<template>
  <el-dialog
    :destroy-on-close="true"
    :lock-scroll="false"
    title="测评结果"
    :visible="visible"
    :show-close="true"
    width="550px"
    top="30px"
    @update:visible="updateVisible">
    <template slot="title" class="dia">
      <span>测评结果</span>
      <el-button type="primary" size="mini" style="margin-left: 8px" @click="dump">导出</el-button>
    </template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>宝贝信息</span>
      </div>
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="宝贝姓名：" style="margin: 5px 20px">
          <el-tag>{{form.name}}</el-tag>
        </el-form-item>
        <el-form-item label="宝贝性别：" style="margin: 5px 20px">
          <el-tag>{{form.gender == 1 ? '男' : '女'}}</el-tag>
        </el-form-item>
        <el-form-item label="出生日期：" style="margin: 5px 20px">
          <el-tag>{{form.birth}}</el-tag>
        </el-form-item>
        <el-form-item label="宝贝年龄：" style="margin: 5px 20px">
          <el-tag>{{form.age}}</el-tag>
        </el-form-item>
        <el-form-item label="联系方式：" style="margin: 5px 20px">
          <el-tag>{{form.phone}}</el-tag>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>测评结果</span>
      </div>
      <el-table
        v-if="isDone === true"
        stripe
        :data="resultData"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="测评因子"
          width="180">
        </el-table-column>
        <el-table-column
          prop="score"
          label="得分"
          width="180">
          <template slot-scope="scope">
            {{scope.row.score}} 分
          </template>
        </el-table-column>
        <el-table-column
          prop="result"
          label="结果">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.result === '异常' ? 'danger' : 'success'"
              disable-transitions>{{scope.row.result}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <span v-else-if="isDone === false" style="text-align: center; color: red"> 未完成问卷 </span>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>详细信息</span>
      </div>
      <el-table
        v-if="isDone === true"
        stripe
        :data="answersData"
        style="width: 100%">
        <el-table-column
          prop="factor"
          label="测评因子">
        </el-table-column>
        <el-table-column
          prop="question"
          label="问题">
        </el-table-column>
        <el-table-column
          prop="answer_text"
          label="回答"
          width="100">
        </el-table-column>
        <el-table-column
          prop="answer_score"
          label="得分"
          width="60">
        </el-table-column>
      </el-table>
      <span v-else-if="isDone === false" style="text-align: center; color: red"> 未完成问卷 </span>
    </el-card>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'AttentionUserResult',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {},
  data() {
    return {
      // 表单数据
      form: Object.assign({status: 1}, this.data),
      // 表单验证规则
      rules: {},
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      resultData: [],
      answersData: [],
      isDone: null
    };
  },
  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
      this.getResult()
      this.getAnswers()
    }
  },
  methods: {
    dump() {
      this.$http.get('/attentionuser/dump', {params: {user_id: this.form.id}}).then(res => {
        if (res.data.code === 0) {
          window.open(res.data.data.url)
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getResult() {
      this.$http.get('/attentionuser/getResult', {params: {user_id: this.form.id}}).then(res => {
        if (res.data.code === 0) {
          this.isDone = true
          this.resultData = res.data.data.data;
        } else {
          this.isDone = false
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    getAnswers() {
      this.$http.get('/attentionuser/getAnswers', {params: {user_id: this.form.id}}).then(res => {
        if (res.data.code === 0) {
          this.answersData = res.data.data;
        } else {
          this.isDone = false
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style >
.el-dialog__header .el-dialog__headerbtn{
  position: absolute;
  right: 20px;
}
</style>
